<template>
    <el-affix class="sider-menu">
        <el-row class="tac">
            <el-col :span="24">
                <el-menu :router="true" default-active="/recommend" class="el-menu-vertical-demo" @open="handleOpen"
                    @close="handleClose">
                    <el-menu-item index="recommend">
                        <el-icon><icon-menu /></el-icon>
                        <span>推荐</span>
                    </el-menu-item>
                    <el-menu-item index="mine">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>我的</span>
                    </el-menu-item>
                    <el-menu-item index="publisher_video">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>发布视频</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </el-affix>

</template>

<script lang="ts" setup>
import {
    Menu as IconMenu,
    Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<style scoped>
.sider-menu {
    height: 100%;
}

.el-menu-vertical-demo {
    height: 100%;
}
</style>

<style>
.sider-menu .el-menu {
    border-right: 0px;
}
</style>